<!-- 提现界面 -->
<template>
	<view class="withdrawal">
		<view class="top baseW">
			<view class="top-money">{{balance}}元</view>
			<view class="top-title">当前账户余额</view>
		</view>
		<view class="content baseW">
			<view class="content-title"><text>提现金额</text></view>
			<view class="content-money">
				<u-field type="number" v-model="money" icon="rmb" icon-color="#000"  label-width="40" placeholder="请填写提现金额" @blur="outinput" placeholder-style="color: #9e9e9e"></u-field>
				<view class="money-total">
					<text  @tap="allDrawal">全部提现</text>
				</view>
			</view>
			<view class="content-rule">
				<text>注：提现金额为100的倍数，手续费为5%</text>
			</view>
		</view>
		<view class="baseW">
			<navigator url="../bankCard/bankCard" class="select-card">
				<view class="iconfont icon-shuruxiugai" style="font-size: 13px; margin-top: 8rpx;"></view>
				<text>选择提现银行卡</text>
			</navigator>
			<view class="selectd-card" v-if="chooseBank.id">
				<view class="u-f-jsb u-f-ac card-info">
					<view>开卡银行</view>
					<view class="card-input">{{chooseBank.bankType}}</view>
				</view>
				<view class="u-f-jsb u-f-ac card-info">
					<view>持卡人姓名</view>
					<view class="card-input">{{chooseBank.realName}}</view>
				</view>
				<view class="u-f-jsb u-f-ac card-info">
					<view>银行卡号</view>
					<view class="card-input">{{chooseBank.cardNum}}</view>
				</view>
			</view>
		</view>
		<view class="recharge-third baseW">
			<radio-group>
				<label class="u-f-jsb border-bot">
					<view class="u-f-ajc ">
						<view class="iconfont icon-yinxingqia" style="font-size: 20px;"></view>
						<view>提现到银行卡</view>
					</view>
					<radio value="wxpay" color="#2ba4f7" checked="true"/>
				</label>
			</radio-group>
		</view>
		<view class="bottom" @click="withdrawal">提现</view>
		
		<tui-keyboard :show="keyboardShow" :radius="true" @click="keyboardClick" @complete="handelComplete" @close="handalClose">
			<view class="tui-digital-box">
				<view class="tui-keyboard-tips">请输入支付密码</view>
			</view>
			<tui-keyboard-input :inputvalue="valArr"></tui-keyboard-input>
		</tui-keyboard>
		
		<tui-modal :show="modal2" @cancel="hide2" :custom="true">
			<view class="tui-modal-custom">
				<u-icon style="background-color: #2ba4f7; border-radius:60rpx; padding-right: 5rpx;" name="checkmark" color="#fff" size="120"></u-icon>
				<view class="tui-modal-custom-text">提现成功，审核成功后，提现金额将转到绑定的微信中</view>
				<view style="height:60rpx; width: 90%; margin: 0 auto; line-height: 60rpx; color:#fff; border-radius: 30rpx; background-color: #2ba4f7;" type="default" @click="handleClick2">确定</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance:0,               //余额
				money:'',                //提现金额
				chooseBank:{},           //选择提现的银行卡
				modal2: false,           //提现成功展示弹框
				keyboardShow: false,	 //密码键盘
				valArr: ['', '', '', '', '', ''],		//密码
				
			}
		},
		onLoad() {
			this.getMoney()
		},
		//拿选定银行卡的数据
		onShow() {
			this.chooseBank = uni.getStorageSync('myidcard')?uni.getStorageSync('myidcard'):''
		},
		methods: {
			//获取账户余额
			getMoney(){
				this.$http.post('/api/auth/business/merchAcc',this.$store.state.userInfo.id).then(res => {
					this.balance = res.data.busiBalance
				})
			},
			//编辑提现金额
			outinput(){
				this.money = ~~this.money;        //去首零
				if(this.money > this.balance) return this.money = this.balance
			},
			//全部提现
			allDrawal(){
				this.money = this.balance
			},
			// 提现
			withdrawal(){
				// 提现金额、银行卡验证
				if(!this.money) return this.$tip.toast("请填写提现金额");
				if(this.money <100) return this.$tip.toast("提现金额必须大于100");
				if((this.money/100 + '').indexOf('.') != -1) {
					this.money = parseInt(this.money/100)* 100;
					return this.$tip.toast("提现金额必须为100的倍数")
				}
				if(this.money > this.balance) return this.$tip.toast('可提现金额不足！');
				if(!this.chooseBank.id) return this.$tip.toast("请选择提现银行卡账号！");
				
				// 还没设置支付密码
				if(!this.$store.state.userInfo.payPwd) {
					this.$tip.toast("您还未设置支付密码，即将跳转");
					setTimeout(() => {
						this.$u.route('/pages/mine/settings/payPwd/register');
					}, 1000);
					return
				}
				
				//开启密码键盘
				this.keyboardShow = true
			},
			//提现成功，确定
			handleClick2(){
				this.hide2()
			},
			//提现成功，返回
			hide2(){
				this.modal2 = false;
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1000)
			},
			// 监听键盘数字输入
			keyboardClick(e) {
				this.valArr = e;
			},
			// 键盘关闭
			handalClose() {
				this.keyboardShow = false;
				this.valArr = ['', '', '', '', '', '']
			},
			// 监听键盘完成指定长度数字输入
			handelComplete(e) {
				let payPwd = e.join('');
				//  校验输入密码
				this.$http.post('/api/auth/business/pwd/verifyPay', {id: this.$store.state.userInfo.id,payPwd}).then(res => {
					this.handalClose();
					// 密码错误
					if(!res.success) return this.$tip.toast(res.msg);
					
					// 密码正确，开始提现
					uni.showLoading({title:'正在提现'});
					let formData = {
						busiId : this.$store.state.userInfo.id,
						busiName : this.$store.state.userInfo.busiName, 
						tradeAmount : this.money,
						realName : this.chooseBank.realName,
						cardNum : this.chooseBank.cardNum,
						bankType : this.chooseBank.bankType
					};
					this.$http.post('/api/auth/business/BankRecordApi/addBankRec', formData).then(res => {
						uni.hideLoading();
						this.$tip.successBack(res, 1500, 1);
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.withdrawal{
	.top{
		height: 100px;
		text-align: center;
		.top-money{
			padding: 30rpx;
			font-size: 20px;
			font-weight: 700;
		}
		.top-title{
			color: #9e9e9e;
		}
	}
	.content{
		.content-title{
			padding: 30rpx 0;
			font-weight: 700;
			font-size: 15px;
		}
		.content-money{
			margin-left: -30rpx;
			.money-total{
				margin: 30rpx 0 20rpx 30rpx;
				font-size: 13px;
				color:#9e9e9e;
			}
		}
		.content-rule{
			padding-bottom: 20rpx;
			color:#cf0000;
		}
	}
	.select-card{
		display: flex;
		padding: 30rpx 0;
		font-weight: 700;
		color:#2ba4f7;
	}
	
	.selectd-card{
		padding-bottom: 20rpx;
		.card-info{
			padding: 20rpx 0 0;
		}
	}
	.recharge-third {
		background-color: #fff;
		padding: 0 28rpx;
		radio-group > label {
			padding: 40rpx 0;
		}
		.surplus {
			color: #666;
			margin-left: 20rpx;
		}
	}
	.bottom{
		position: fixed;
		bottom: 20rpx;
		margin: 0 5%;
		width: 90%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 15px;
		border-radius: 40rpx;
		background-color: #2ba4f7;
	}
	.iconfont{
		margin-right: 20rpx;
	}
	.tui-keyboard-tips {
		width: 100%;
		height: 120rpx;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		background: #fff;
		position: relative;
		color: #333;
		border: 0;
	}
}
</style>
